<template>
    <div class="flex items-center justify-end space-x-2 text-xs text-gray-600">
        <div class="px-3 py-1 border rounded-full" v-for="(item, index) in actions" :key="index" :class="item.code">
            {{ item.name }}
        </div>
    </div>
</template>
    
<script setup lang='ts'>
const { status } = defineProps<{
    status: 'unpaid' | 'unshipped' | 'unreceived' | 'comment' | 'after-sale';
}>()
const actionList = [
    { name: '查看发票', code:'invoice',allowStatus: ['unpaid', 'unshipped', 'unreceived', 'comment', 'after-sale'] },
    { name: '删除订单', code:'delete-order',allowStatus: ['comment', 'after-sale'] },
    { name: '退还/售后', code:'after-sale',allowStatus: ['comment', 'after-sale'] },
    { name: '取消订单', code:'cancel-order',allowStatus: ['unpaid'] },
    { name: '去支付', code:'pay',allowStatus: ['unpaid'] },
    { name: '再次购买', code:'again',allowStatus: ['comment', 'after-sale'] },
]

const actions = computed(() => actionList.filter(item => item.allowStatus.includes(status)))
</script>
    
<style lang="scss" scoped>
.invoice{

}
.delete-order{

}
.after-sale{

}
.cancel-order{

}
.pay,.again{
    @apply border-red-500 text-red-500;
}
.again{

}
</style>